// 水平居中
@mixin h-center() {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

// 垂直居中
@mixin v-center() {
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

// 水平、垂直居中
@mixin hv-center() {
    display: inline-block;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

// 解决 flex 最后一行没有左对齐问题 $num 一行多少个 $width 每一个的宽度
@mixin flex-last($num,$width) {
    @for $i from 2 to $num {
        &:last-child:nth-child(#{$num}n+#{$i}) {
            margin-right: calc((100% - #{$width}) / (#{$num} - 1) * (#{$num} - #{$i}));
        }
    }
}

//超出展示省略号
//单行
@mixin ellipsis($width:100%) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: $width;
}
//多行
@mixin ellipsis-num($num:3) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $num;
    overflow: hidden;
}
//宽高相等的盒子
@mixin box($num) {
    display: inline-block;
    width: $num;
    height: $num;
}


